<style scoped>
</style>
<template>
    <div>
        <Row>
            <Col span="24">
            <Row>
                <Col span="16">
                </Col>
                <Col span="8">
                <Button type="primary" @click="toPage">查询</Button>&nbsp;
                <Button type="primary" @click="toAdd">新增</Button>&nbsp;
                <Button type="error" @click="toDel">删除</Button>&nbsp;
                <Button type="success" @click="toExprotExcel" text="">导出</Button>
                </Col>
            </Row>
            <Row style="margin-top: 5px">
                <Col span="24">
                <Table ref="table" border :loading="pageData.loading" :columns="pageData.columns" :data="pageData.list" highlight-row size="small" @on-selection-change="setSelectData"></Table>
                <Page :current="findData.pageNum" :total="findData.total" :page-size="findData.pageSize" show-sizer show-total prev-text="上一页" next-text="下一页" @on-change="(pagenum) =>{ this.findData.pageNum = pagenum;toPage()}"
                      @on-page-size-change="(pagenum) =>{ this.findData.pageSize = pagenum;toPage() }"/>
                </Col>
            </Row>
            </Col>
        </Row>

        <Drawer title="${table.comment!}信息" :closable="false" v-model="is_view"  width="500">
            <Form :model="form" label-position="left" :label-width="80" ref="form" :rules="ruleCustom">
                <#list table.fields as field>
                     <Row :gutter="32" <#if field.keyFlag>style="display: none"</#if> >
                         <Col span="24">
                         <FormItem label="${field.comment}" label-position="top">
                             <#if field.propertyType == "date">
                                 <DatePicker v-model="form.${field.propertyName}" type="date" format="yyyy-MM-dd" style="width: 200px"></DatePicker>
                             <#else>
                                 <Input v-model="form.${field.propertyName}" placeholder="" />
                             </#if>
                         </FormItem>
                         </Col>
                     </Row>
                </#list>
            </Form>
            <div class="demo-drawer-footer">
                <Button style="margin-right: 8px" @click="is_view = false">关闭</Button>
                <Button type="primary" @click="toSave">保存</Button>
            </div>
        </Drawer>

    </div>
</template>
<script>
    import ${package.ModuleName} from '@/api/sys/${package.ModuleName}'
    export default {
        data () {
            return {
                is_view: false,
                findData: {total: 0, pageSize: 10, pageNum: 1,companyId:undefined},
                form: {},
                pageSelectData: [],
                pageData: {
                    loading: false,
                    list: [],
                    columns: [
                        {
                            type: 'selection',
                            width: 50,
                            align: 'center'
                        },
                        <#list table.fields as field>
                        {'title': '${field.comment}', 'key': '${field.propertyName}', width: 100},
                        </#list>
                        {
                            title: '操作',
                            key: 'action',
                            fixed: 'right',
                            width: 75,
                            render: (h, params) => {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.toLoad(params)
                                            }
                                        }
                                    }, '修改')
                                ])
                            }
                        }
                    ]
                },
                ruleCustom: {
                    roleCode: [
                        { required: true, message: '角色代码', trigger: 'blur' }
                    ],
                    roleName: [
                        { required: true, message: '角色名称', trigger: 'blur' }
                    ],
                    companyId: [
                        { required: true, message: '公司必填', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            toPage () {
                this.pageData.loading = true
                ${package.ModuleName}.page(this.findData).then(res => {
                    const data = res.data
                    this.pageData.list = data.list
                    this.pageData.loading = false
                    this.findData.pageNum = data.pageNum
                    this.findData.pageSize = data.pageSize
                    this.findData.total = data.total
                })
            },
            toAdd () {
                this.is_view = true
                this.form = {}
            },
            toLoad (param) {
            ${package.ModuleName}.load(param.row.id).then(res => {
                    const data = res.data
                    this.form = data
                    this.is_view = true
                })
            },
            toSave () {
            ${package.ModuleName}.save(this.form).then(res => {
                    this.$Message.info('保存成功')
                    this.is_view = false
                    this.toPage()
                })
            },
            toDel () {
                if (this.pageSelectData.length > 0) {
                        ${package.ModuleName}.del(this.pageSelectData).then(res => {
                        this.$Message.info('操作成功')
                        this.toPage()
                    })
                } else {
                    this.$Message.info('请选择1条记录')
                }
            },
            setSelectData (params) {
                this.pageSelectData = params
            },
            toExprotExcel () {
                    ${package.ModuleName}.exportExcel(this.form).then(res => {
                    let list = res.data;
                    this.$refs.table.exportCsv({
                        filename: '${table.comment!}列表',
                        columns: this.pageData.columns,
                        data: list
                    });
                })
            }
        },
        mounted: function () {
            this.toPage()
        }
    }
</script>
